<template>
  <div class="pie-chart-main">
    <div id="main" ref="demo" style="width: 320px;height: 120px"></div>
  </div>
</template>

<script lang="ts">
import { Options, prop, Vue } from 'vue-class-component'
import * as echarts from 'echarts'

interface Count {
  deviceCount: number
  alarmCount: number
}
class Props {
  list = prop({
    type: Array,
    required: true
  })
}

@Options({
  watch: {
    list (val: any, oldVal: any) {
      if (val.length > 0) {
        this.$nextTick(() => {
          this.initChart()
        })
      }
    }
  }
})
export default class PieChart extends Vue.with(Props) {
  private initChart () {
    var chartDom:HTMLElement = this.$refs.demo as HTMLElement
    var myChart = echarts.init(chartDom)
    var option
    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: '20',
        top: '25',
        itemWidth: 6,
        itemGap: 20,
        icon: 'circle'
      },
      series: [
        {
          name: '设备情况',
          type: 'pie',
          radius: ['0%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 0,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: this.list
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.pie-chart-main {
  position: absolute;
  display: flex;
  top: 122PX;
  left: 0PX;
  z-index: 99;
  width: 320px;
  //padding: 30px 0;
  opacity: 0.85;
  background: rgba(255, 255, 255, 1);
  color: black;
  border-radius: 6px;
  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.1);
  font-size: 12px;
  justify-content: center;
  .cont{
    position: relative;
    flex: 1;
    text-align: left;
    line-height: 30px;
    height: 60px;
    div{
      padding:0 30px;
    }
    &::after{
      content:'';
      position: absolute;
      top: 5px;
      height: 50px;
      border-right: 1px solid rgba(242,242,242,0.15);
    }
  }
  .noBord{
    border:none
  }
  .num{
    font-size: 24px;
    font-weight: 600;
    color: #fff;
  }
}
</style>
